<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: 'cc4a98169e2a53ac4ff33a1a327b2ba5'
}
export default {
  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      keyword: '',
      leftFlag: true,
      options: [],
      portraitData: {
        origin: '',
        destination: '',
        spots: [],
        budgetTime: 0,
        maxPOIs: 0
      },
      active: 0,
      route: [],
      routeFlag: false,
      markers: [],
      map: null,
      simUser: null,
      simRoute: null,
      routeFlag11: false,
      active11: 0
    }
  },
  methods: {
    getPlan () {
      const portraitDataTwo = {
        origin: this.portraitData.origin,
        destination: this.portraitData.destination,
        spots: this.portraitData.spots,
        budgetTime: this.portraitData.budgetTime * 60,
        maxPOIs: this.portraitData.maxPOIs
      }
      const _this = this
      _this
        .$http({
          method: 'post',
          url: '/poi/getPlan',
          data: portraitDataTwo
        })
        .then(function (response) {
          console.log(response.data.data)
          _this.route = response.data.data.spotInfos
          _this.routeFlag = true
          for (let index = 0; index < _this.route.length; index++) {
            const marker = new AMap.Marker({
              position: new AMap.LngLat(
                _this.route[index].longitude,
                _this.route[index].latitude
              ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: _this.route[index].name
            })
            _this.markers.push(marker)
            _this.map.add(marker)
          }
          _this.map.setCenter(
            new AMap.LngLat(_this.route[0].longitude, _this.route[0].latitude)
          )
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    stepCLick () {
      const length = this.route.length
      // const originBuffer = [
      //   this.route[this.active].longitude,
      //   this.route[this.active].latitude
      // ]
      // const destinationBuffer = [
      //   this.route[this.active + 1].longitude,
      //   this.route[this.active + 1].latitude
      // ]
      const points = [
        { keyword: this.route[this.active].name, city: '北京' },
        { keyword: this.route[this.active + 1].name, city: '北京' }
      ]
      console.log(points)
      // // 清除所有覆盖物，只要用这个就可以了，
      // this.map.clearMap()
      // const points = [originBuffer, destinationBuffer]
      const driving = new AMap.Driving({
        map: this.map,
        panel: 'panel',
        policy: AMap.DrivingPolicy.LEAST_TIME
      })
      driving.search(points, function (status, result) {
        if (status === 'complete') {
          console.log('绘制驾车路线完成')
        } else {
          console.log('获取驾车数据失败：' + result)
        }
      })
      this.active = (this.active + 1) % length
    },
    stepCLick11 () {
      const length = this.simRoute.length
      // const originBuffer = [
      //   this.route[this.active].longitude,
      //   this.route[this.active].latitude
      // ]
      // const destinationBuffer = [
      //   this.route[this.active + 1].longitude,
      //   this.route[this.active + 1].latitude
      // ]
      const points = [
        { keyword: this.simRoute[this.active11].name, city: '北京' },
        { keyword: this.simRoute[this.active11 + 1].name, city: '北京' }
      ]
      console.log(points)
      // // 清除所有覆盖物，只要用这个就可以了，
      // this.map.clearMap()
      // const points = [originBuffer, destinationBuffer]
      const driving = new AMap.Driving({
        map: this.map,
        panel: 'panel',
        policy: AMap.DrivingPolicy.LEAST_TIME
      })
      driving.search(points, function (status, result) {
        if (status === 'complete') {
          console.log('绘制驾车路线完成')
        } else {
          console.log('获取驾车数据失败：' + result)
        }
      })
      this.active11 = (this.active11 + 1) % length
    },
    initMap () {
      AMapLoader.load({
        key: '04b3029465de5260630b5df4963d8478', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving'],
        AMapUI: {
          version: '1.1',
          plugins: []
        },
        Loca: {
          version: '2.0'
        }
      })
        .then(AMap => {
          this.map = new AMap.Map('container', {
            // 设置地图容器id
            zoom: 11, // 初始化地图级别
            center: [116, 39.90923] // 初始化地图中心
          })
        })
        .catch(e => {
          console.log(123)
        })
    },
    sim () {
      this.leftFlag = !this.leftFlag
      const _this = this
      _this
        .$http({
          method: 'get',
          url: '/user/sim'
        })
        .then(function (response) {
          _this.simUser = response.data.data
          console.log(_this.simUser)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    pp (item) {
      this.simRoute = item.route
      this.routeFlag11 = true
    }
  },
  created () {
    const _this = this
    _this
      .$http({
        method: 'get',
        url: '/poi/allPoi'
      })
      .then(function (response) {
        console.log(response)
        const array = response.data.pois
        for (let index = 0; index < array.length; index++) {
          const buffer = { value: array[index].name, label: array[index].name }
          _this.options.push(buffer)
        }
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  mounted () {
    this.initMap()
  }
}
</script>

<template>
  <div class="po">
    <div class="left">
      <!-- 定制面板 -->
      <div v-if="leftFlag" class="portraitDiv">
        <div class="upOn">
          <div class="section1" style="height: 50px; line-height: 50px">
            <!-- 起点 -->
            <div style="float: left; width: 49%">
              <span class="tagOut">起点</span>
              <el-select
                class="start"
                v-model="portraitData.origin"
                placeholder="请选择起点"
                style="width: 80%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div style="float: right; width: 49%; margin-left: 2%">
              <!-- 终点 -->
              <span class="tagOut">终点</span>
              <el-select
                class="end"
                v-model="portraitData.destination"
                placeholder="请选择终点"
                style="width: 80%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div style="clear: both"></div>
          </div>
          <div
            class="section2"
            style="height: 50px; line-height: 50px; margin-top: 30px"
          >
            <!-- 预算时间 -->
            <span class="tagOut" style="float: left">预算时间</span>
            <el-slider
              class="budgetTime"
              v-model="portraitData.budgetTime"
              :max="10"
              show-input
              style="
                width: 79%;
                display: inline-block;
                height: 25px;
                float: right;
              "
            >
            </el-slider>
          </div>
          <div
            class="section3"
            style="height: 50px; line-height: 50px; margin-top: 30px"
          >
            <!-- 必经过节点 -->
            <span class="tagOut" style="float: left">必过节点</span>
            <el-select
              class="spots"
              v-model="portraitData.spots"
              multiple
              placeholder="请选择必经过景点"
              style="width: 80%; float: right"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div
            class="section4"
            style="height: 50px; line-height: 50px; margin-top: 30px"
          >
            <!-- 最大景点数 -->
            <span class="tagOut" style="float: left">最多节点</span>
            <el-slider
              class="maxSpotsNumber"
              v-model="portraitData.maxPOIs"
              :step="1"
              :max="10"
              show-stops
              style="width: 79%; display: inline-block; float: right"
            >
            </el-slider>
          </div>
          <div style="text-align: center; margin-top: 30px">
            <el-button size="medium" @click="getPlan">提交</el-button>
          </div>
        </div>

        <div style="background-color: rgb(195, 195, 195); height: 1px"></div>

        <div class="routeDown">
          <el-steps :active="active" finish-status="success">
            <el-step
              v-for="item in route"
              :key="item.id"
              :title="item.name"
              style="font-size: 10px"
            ></el-step>
          </el-steps>
          <el-button
            v-if="routeFlag"
            style="margin-top: 12px; margin: 0 auto"
            @click="stepCLick"
            >下一步</el-button
          >
        </div>
      </div>
      <div v-else class="recommendDiv">
        <div class="similarUser">
          <div class="userItem" v-for="item in simUser" :key="item.id" @click="pp(item)">
            <img :src="item.img" alt="" style="height: 80px; width: 80px;">
            <div>{{item.name}}</div>
          </div>
        </div>
        <div style="background-color: rgb(195, 195, 195); height: 1px"></div>
        <div class="userRoute">
          <el-steps :active="active11" finish-status="success">
            <el-step
              v-for="item in simRoute"
              :key="item.id"
              :title="item.name"
            ></el-step>
          </el-steps>
          <el-button
            v-if="routeFlag11"
            style="margin-top: 12px; margin: 0 auto"
            @click="stepCLick11"
            >下一步</el-button
          >
        </div>
      </div>
      <div
        style="
          background-color: rgb(185, 183, 183);
          height: 1px;
          margin-bottom: 20px;
        "
      ></div>
      <h3 v-if="leftFlag" @click="sim">相似推荐 →</h3>
      <h3 v-else @click="leftFlag = !leftFlag">私人定制 →</h3>
    </div>
    <div class="right">
      <div id="container"></div>
      <div
        id="panel"
        style="
          position: absolute;
          top: 0px;
          left: 0px;
          width: 300px;
          height: 500px;
          z-index: 99999999;
          overflow: auto;
        "
      ></div>
    </div>
    <div style="clear: both"></div>
  </div>
</template>
<style lang="less" scoped>
.left {
  width: 30%;
  position: fixed;
  top: 80px;
  bottom: 0px;
  padding: 30px;
  padding-top: 50px;
  padding-bottom: 60px;
  box-sizing: border-box;
  .portraitDiv {
    height: 100%;
    .upOn {
      height: 55%;
      .tagOut {
        font-family: cool;
        font-size: 20px;
        margin-right: 10px;
        display: inline-block;
      }
    }
    .routeDown {
      margin-top: 5%;
      height: 35%;
    }
  }
  .recommendDiv {
    height: 100%;
    .similarUser {
      text-align: center;
      padding-top: 10px;
      height: 55%;
      .userItem {
        display: inline-block;
        margin-top: 20px;
        margin-right: 5%;
        width: 100px;
        height: 100px;
        border-radius: 20px;
      }
      div:nth-child(4n) {
        margin-right: 0px;
      }
    }
    .userRoute {
      height: 35%;
      margin-top: 5%;
    }
  }
  h3 {
    float: right;
    color: grey;
    cursor: pointer;
  }
}

.right {
  width: 70%;
  position: fixed;
  top: 80px;
  bottom: 0px;
  right: 0px;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>
